<template>
  <div class="component-placeholder">
    <r-icon :name="icon" class="icon"/>
    <h3>{{tips}}</h3>
  </div>
</template>
<script>
import RIcon from 'src/components/r-icon'
export default {
  name: 'r-placeholder',
  components: {
    RIcon
  },
  props: {
    icon: {
      type: String,
      default: 'find.svg'
    },
    tips: {
      type: String,
      default: '暂无任何记录哦'
    }
  }
}
</script>
<style lang="scss">
  @import "../styles/index";

  .component-placeholder {
    width: 100%;
    height: 100%;
    @extend %flex-center;
    flex-direction: column;
    color: $color-placeholder;

    .icon {
      width: 100px;
      fill: currentColor;
    }

    h3 {
      font-weight: normal;
      font-size: 1em;
      margin: 20px 0;
    }
  }
</style>
